<template lang="pug">
    div.container
      div(class="content")
        div(class="score") 得分：{{score}}
        div(ref="layout" class="layout" id="layout")
          div(v-if="start" class="start" @click="startGame") 开始游戏
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
    components: {}
})
export default class Home extends Vue {
    private score: number = 0;
    private start: boolean = true;
    // 飞机数据
    private data: any = {
        // 子弹
        bullet: {
            plane: { name: "plane", speed: 30 },
            enemy: { name: "enemy", speed: 30 }
        },
        plane: {},
        // 敌人数据
        // 随机数
        eRandom: [
            2,
            1,
            1,
            3,
            3,
            1,
            1,
            3,
            3,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            1,
            2,
            0,
            0,
            0,
            0,
            3,
            3,
            2,
            3,
            3,
            1,
            1,
            3,
            3,
            2
        ],
        enemy: {
            blood: [2, 20, 50, 10],
            score: [2, 20, 50, 10],
            speed: [1, 3, 1, 2],
            bullet: [false, false, false, true],
            self_width: [126, 108, 126, 120],
            self_height: [81, 81, 87, 101]
        }
    };
    // 场景
    private layout: any;
    // 飞机
    private plane: any;
    private vx: any;
    private vy: any;
    private mounted() {
        // this.gameBegin();
    }
    // 初始化
    private gameBegin(): void {
        this.layout = document.getElementById("layout");
        // console.log(this.layout);
    }
    // 开始按钮
    private startGame() {
        this.gameBegin();
        this.start = false;
        this.createPlane();
    }
    // 创建飞机
    private createPlane(): void {
        this.plane = document.createElement("div");
        this.plane.className = "plane";
        this.plane.style.width = "110px";
        this.plane.style.left =
            (this.layout.offsetWidth - this.plane.offsetWidth) / 2 + "px";
        this.layout.append(this.plane);
        this.plane.bullet = setInterval(() => {
            this.createBullet(this.data.bullet.plane.name, this.plane, 0, 1);
        }, 150);
        this.bindPlane(this.plane);
        this.plane.createEnemy = setInterval(() => {
            this.createEnemy();
        }, 1000);
    }
    // 创建敌人
    private createEnemy(): void {
        let e: number = this.data.eRandom[~~(Math.random() * 60)];
        let enemy: any = document.createElement("div");
        enemy.className = `enemy enemy${e}`;
        enemy.style.cssText =
            "width:" +
            this.data.enemy.self_width[e] +
            "px; height:" +
            this.data.enemy.self_height[e] +
            "px";
        enemy.style.left =
            ~~(
                Math.random() *
                (this.layout.offsetWidth - this.data.enemy.self_width[e])
            ) + "px";
        enemy.setAttribute("blood", this.data.enemy.blood[e]);
        enemy.setAttribute("score", this.data.enemy.score[e]);
        enemy.setAttribute("speed", this.data.enemy.speed[e]);
        enemy.setAttribute("bullet", this.data.enemy.bullet[e]);
        this.layout.append(enemy);
        //子弹碰撞
        if (this.data.enemy.bullet[e]) {
            enemy.createBullet = setInterval(() => {
                this.createBullet(
                    this.data.bullet.enemy.name,
                    enemy,
                    enemy.offsetHeight,
                    -1
                );
            }, 2000);
        }
        this.runEnemy(enemy);
    }
    //敌人运动
    private runEnemy(obj: any): void {
        obj.timer = setInterval(() => {
            obj.style.top =
                obj.offsetTop + parseInt(obj.getAttribute("speed")) + "px";
            if (obj.offsetTop > this.layout.offsetHeight) {
                clearInterval(obj.timer);
                obj.parentNode.removeChild(obj);
            }
            let i,
                enemy: any = document.getElementsByClassName("enemy"),
                len: number = enemy.length;
            for (i = 0; i < len; i++) {
                if (this.crash(enemy[i], this.plane)) {
                    //与敌机碰撞]
                    clearInterval(obj.timer);
                    this.gameOver();
                    // this.plane.parentNode.removeChild(this.plane);
                    // this.plane = null;
                    // enemy[i].parentNode.removeChild(enemy);
                }
            }
        }, 30);
        // obj.timer = setInterval(function(){

        //     obj.style.top = (obj.offsetTop + parseInt(obj.getAttribute('speed'))) + 'px';

        //     if(obj.offsetTop > That.layout.offsetHeight){
        //         clearInterval(obj.timer);
        //         obj.parentNode.removeChild(obj);
        //     };

        //     for(var i = 0, e = document.getElementsByClassName('enemy') ,len = e.length; i<len; i++){
        //         if(That.TC(e[i],That.plane) ){  //与敌机碰撞]

        //             clearInterval(obj.timer);
        //             That.gameOver();
        //             That.plane.parentNode.removeChild(That.plane);
        //             That.plane = null;
        //             e[i].parentNode.removeChild(e);

        //         }
        //     }

        // },30)
    }
    private runBullet(buttle: any, x: number, y: number): void {
        //子弹运动
        buttle.timer = setInterval(() => {
            if (
                buttle.offsetTop <= 30 ||
                buttle.offsetTop >= this.layout.offsetHeight ||
                buttle.offsetLeft <= 0 ||
                buttle.offsetLeft >= this.layout.offsetWidth
            ) {
                //边界判断
                clearInterval(buttle.timer);
                this.layout.removeChild(buttle);
            } else {
                buttle.style.cssText =
                    "top : " +
                    (buttle.offsetTop + y) +
                    "px; left : " +
                    (buttle.offsetLeft + x) +
                    "px";
            }
            let i: number,
                EN: any = document.getElementsByClassName("enemy"),
                len: number = EN.length;
            for (i = 0; i < len; i++) {
                if (
                    this.crash(EN[i], buttle) &&
                    buttle.classList.contains("b1")
                ) {
                    clearInterval(buttle.timer);
                    this.layout.removeChild(buttle);
                    let Blood: any = EN[i].getAttribute("blood") - 1;
                    if (Blood) {
                        EN[i].setAttribute("blood", Blood);
                    } else {
                        this.score += parseInt(EN[i].getAttribute("score"));
                        EN[i].style.background =
                            "url('../assets/image/pw.png') center no-repeat / cover";
                        let pare = EN[i];
                        EN[i].classList.remove("enemy");
                        EN[i].timer = setTimeout(() => {
                            this.layout.removeChild(pare);
                        }, 400);
                    }
                }
            }
            if (
                this.crash(this.plane, buttle) &&
                buttle.classList.contains("b2")
            ) {
                clearInterval(buttle.timer);
                this.layout.removeChild(buttle);
                this.layout.removeChild(this.plane);
                this.gameOver();
            }
        }, 30);
    }
    // 鼠标移动飞机
    private bindPlane(plane: any): void {
        var lagoutx = this.layout.offsetLeft,
            lagouty = this.layout.offsetTop,
            lagoutw = this.layout.offsetWidth,
            lagouth = this.layout.offsetHeight;

        plane.onmousedown = (event: any): void => {
            let px = plane.offsetLeft,
                py = plane.offsetTop,
                dx = event.clientX - lagoutx - plane.offsetWidth / 2,
                dy = event.clientY - lagouty - plane.offsetHeight / 2;
            document.onmousemove = (event: any): void => {
                dx = event.clientX - lagoutx - plane.offsetWidth / 2;
                dy = event.clientY - lagouty - plane.offsetHeight / 2;
                if (dx <= 0) {
                    dx = 0;
                } else if (dx >= lagoutw - plane.offsetWidth) {
                    dx = lagoutw - plane.offsetWidth;
                }
                if (dy <= 0) {
                    dy = 0;
                } else if (dy >= lagouth - plane.offsetHeight) {
                    dy = lagouth - plane.offsetHeight;
                }
                plane.style.cssText = "left :" + dx + "px; top :" + dy + "px";
            };
            document.onmouseup = (event: any): void => {
                document.onmousemove = null;
            };
        };
    }
    // 游戏结束
    private gameOver(): void {
        clearInterval(this.plane.createEnemy);
        clearInterval(this.plane.bullet);
        this.start = true;
        // this.mystart.style.display = 'block';
        // document.getElementsByClassName('score')[0].style.display = 'none';
        // document.getElementById('name-over').getElementsByTagName('i')[0].innerHTML = 'GAME OVER!';
        // document.getElementById('name-over').getElementsByTagName('p')[0].innerHTML = this.score.innerHTML;
        // document.getElementById('startBtn').value = 'AGAIN';
        while (this.layout.hasChildNodes()) {
            this.layout.removeChild(this.layout.firstChild);
        }
        this.score = 0;
    }
    // 创建子弹
    private createBullet(
        name: string,
        obj: any,
        h: number,
        direction: number
    ): void {
        let bullet = document.createElement("div");
        bullet.className = name;
        bullet.style.top =
            obj.offsetTop + h - bullet.offsetHeight * direction - 10 + "px";
        bullet.style.left = obj.offsetLeft + obj.offsetWidth / 2 - 4 + "px";
        this.layout.append(bullet);
        if (bullet.classList.contains("b1")) {
            this.runBullet(bullet, 0, -30);
        } else {
            this.speedDecomposition(this.plane, bullet);
            this.runBullet(bullet, this.vx, this.vy);
        }
    }
    private speedDecomposition(plane: any, bullet: any): void {
        //计算敌机子弹方向，击向飞机
        let planeLeft = plane.offsetLeft,
            planeTop = plane.offsetTop,
            bulletLeft = bullet.offsetLeft,
            bulletTop = bullet.offsetTop,
            s = Math.sqrt(
                (planeLeft - bulletLeft) * (planeLeft - bulletLeft) +
                    (planeTop - bulletTop) * (planeTop - bulletTop)
            ),
            sin = (planeTop - bulletTop) / s;
        (this.vy = 5 * sin), (this.vx = Math.sqrt(5 * 5 - this.vy * this.vy));
        planeLeft > bulletLeft ? (this.vx = this.vx) : (this.vx = -this.vx);
    }
    private crash(obj1: any, obj2: any) {
        //碰撞检测

        var t1 = obj1.offsetTop, //上
            r1 = obj1.offsetLeft + obj1.offsetWidth, //右
            b1 = obj1.offsetTop + obj1.offsetHeight, //下
            l1 = obj1.offsetLeft, //左
            t2 = obj2.offsetTop, //上
            r2 = obj2.offsetLeft + obj2.offsetWidth, //右
            b2 = obj2.offsetTop + obj2.offsetHeight, //下
            l2 = obj2.offsetLeft; //左

        if (t1 > b2 || b1 < t2 || r1 < l2 || l1 > r2) {
            return false;
        } else {
            return true;
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
}
.content {
    width: 80%;
    height: 100%;
    z-index: 100;
}
.layout {
    width: 100%;
    height: 100%;
}
.score {
    position: fixed;
    top: 38px;
    left: 80px;
}
.start {
    margin-top: 50vh;
    cursor: pointer;
}
.layout {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    // background: url('img/bj.jpg') center bottom /100% auto;
    /* background:#505149; */
    position: relative;
    overflow: hidden;
    animation: movebg 3000s linear infinite;
    -moz-animation: movebg 3000s linear infinite; /* Firefox */
    -webkit-animation: movebg 3000s linear infinite; /* Safari and Chrome */
    -o-animation: movebg 3000s linear infinite; /* Opera */
}
.plane {
    width: 110px;
    height: 90px;
    /* background:#fff; */
    background: url("../assets/image/P.png") 0 -101px no-repeat;
    position: absolute;
    bottom: 0;
    left: 50%;
    cursor: pointer;
}
.b1 {
    width: 5px;
    height: 15px;
    border-radius: 50% 50% 5px 5px;
    background: #fff;
    position: absolute;
    top: -50px;
    left: 50%;
}
.enemy0 {
    width: 126px;
    height: 81px;
    /* background:yellow; */
    background: url("../assets/image/P.png") -377px 0 no-repeat;
    position: absolute;
    top: -70px;
    left: 20px;
}
.enemy1 {
    width: 108px;
    height: 81px;
    /* background:green; */
    background: url("../assets/image/P.png") 0 0 no-repeat;
    position: absolute;
    top: -150px;
    left: 600px;
}
.enemy2 {
    width: 126px;
    height: 87px;
    /* background:blue; */
    background: url("../assets/image/P.png") -242px 0 no-repeat;
    position: absolute;
    top: -400px;
    left: 80px;
}
.enemy3 {
    width: 120px;
    height: 101px;
    /* background:red; */
    background: url("../assets/image/P.png") -114px 0 no-repeat;
    position: absolute;
    top: -60px;
    left: 510px;
}
.b2 {
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    bottom: -50px;
    background: #fff;
}

// .score {
//     display: none;
//     padding: 10px 15px;
//     font-size: 30px;
//     font-weight: bold;
//     color: #99b2d6;
//     background: #031540;
//     border: 5px solid #425579;
//     border-radius: 0 50px 50px 0;
//     position: absolute;
//     top: 20px;
//     left: 20px;
//     z-index: 1000000;

//     /* background:red; */
// }

// @keyframes movebg {
//     from {
//         background-position: 0 10000%;
//     }
//     to {
//         background-position: 0 0%;
//     }
// }

// @-moz-keyframes movebg /* Firefox */ {
//     from {
//         background-position: 0 10000%;
//     }
//     to {
//         background-position: 0 0;
//     }
// }

// @-webkit-keyframes movebg /* Safari and Chrome */ {
//     from {
//         background-position: 0 10000%;
//     }
//     to {
//         background-position: 0 0%;
//     }
// }

// @-o-keyframes movebg /* Opera */ {
//     from {
//         background-position: 0 10000%;
//     }
//     to {
//         background-position: 0 0;
//     }
// }
#start {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
}
#startBtn {
    background: blue;
    color: #fff;
    font-size: 50px;
    margin: 100px 0 0 -115px;
    padding: 10px 30px;
    border: 5px solid #fff;
    border-radius: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    outline: none;
    cursor: pointer;
}
#name-over {
    font-family: "微软雅黑", sans-serif;
    width: 100%;
    padding: 120px 0 10px;
    margin: -200px 0 0 0;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    color: rgba(106, 124, 197, 1);
    line-height: 70px;
    background: rgba(106, 124, 197, 0.5) url("../assets/image/P1.png") center
        20px no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
}
</style>
